<template>
	<view class="cus-nav" :style="{paddingTop: statusBarHeight + 'px', background: bgColor || '#fff'}">
		<text>{{title}}</text>
		<view>
			<cusSearchVue></cusSearchVue>
		</view>
	</view>
</template>

<script setup>
	import cusSearchVue from '../cus-search/cus-search.vue';
	import { defineProps } from 'vue';
	
	const {title, bgColor} = defineProps(['title', 'bgColor'])
	// 获取一下手机状态栏的高度，然后把这个高度设置到自定义组件的上面去
	
	// 获取窗口信息
	const {statusBarHeight} = uni.getWindowInfo()
	// 获取状态栏高度的时候，已经是rpx转换成px之后的值
</script>

<style lang="scss" scoped>
	.cus-nav{
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 9999;
	}
</style>